<template>
  <view class="bill_detail_box">
    <view class="content">
      <!-- 账单标题内容 -->
      <view class="item"> {{ detailData?.billMsg }} </view>

      <!-- 支付金额 -->
      <view class="price item" v-if="detailData?.billActualPayment">
        支付金额 {{ format.priceHandler(detailData?.billActualPayment, '元') }}
      </view>

      <!-- 支付状态 -->
      <view class="state item">
        {{ getEnumValue(detailData?.billState) }}
      </view>
    </view>

    <!-- 主题内容 -->
    <house-bill-detail
      :data="detailData"
      v-if="category == BillTypeEnum.HOUSE"
    />
    <others-bill-detail
      :data="detailData"
      v-else-if="category == BillTypeEnum.OTHER"
    />
    <living-bill-detail :data="detailData" v-else />

    <buttonClick v-if="isPay" open-type="pay" :is-bottom="true" msg="去支付" />
  </view>
</template>
<!-- 账单详情分页页面 -->
<script lang="ts" setup>
import buttonClick from '@/components/common/button_click/button-click.vue'
import { ReqSelectBillDetail } from '@/api/bill'
import othersBillDetail from '@/components/business/bill/others-bill-detail.vue'
import livingBillDetail from '@/components/business/bill/living-bill-detail.vue'
import houseBillDetail from '@/components/business/bill/house-bill-detail.vue'
import type { PageBill } from '@/config/data/data'
import {
  BillSateEnum,
  BillTypeEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import format from '@/util/format'

//账单id
const id = ref(0)

//账单类型
const category = ref('')

//账单详情数据
const detailData = ref<PageBill>({
  billId: 0,
  billMsg: '',
  billPrice: 0,
  billActualPayment: 0,
  paymentMethods: 0,
  billPayTime: null,
  billCategory: '',
  billState: 0,
  billContent: null,
})

//获取数据
const getData = () => {
  ReqSelectBillDetail({ id: id.value }).then((res) => {
    console.log(res)
    if (res.code == 200 && res.data) {
      detailData.value = res.data
    }
  })
}

//是否显示支付按钮
const isPay = computed(() => {
  if (detailData.value?.billState) {
    return checkStateEnum(detailData.value.billState, BillSateEnum.WAIN_PAID)
  } else return false
})

//页面加载
onLoad((e) => {
  if (e && e.id && e.category) {
    id.value = e.id
    category.value = e.category
    getData()
  }
})
</script>

<style scoped lang="scss">
.bill_detail_box {
  width: 100%;
  background-color: $uni-bg-color-grey;
  font-size: 28rpx;

  .content {
    padding: 20rpx 30rpx;
    width: calc(100% - 60rpx);
    margin-bottom: 30rpx;
    background-color: $uni-bg-color;
  }

  .item {
    font-size: 34rpx;
    width: 100%;
    margin: 10rpx 0 30rpx;
    text-align: center;
  }

  .state {
    color: rgb(247, 137, 34);
  }
}
</style>
